<template>
    <div>
      <!--面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
      </el-breadcrumb>
      <!--卡片试图区域-->
      <el-card>
        <!--提示区域-->
        <el-alert type="warning" title="添加商品信息" :closable="false" show-icon center></el-alert>
        <!--进度条区域  -0操作将字符串转换为数值-->
        <el-steps   :active="activeStep-0" finish-status="success" align-center>
          <el-step title="基本信息"></el-step>
          <el-step title="商品参数"></el-step>
          <el-step title="商品属性"></el-step>
          <el-step title="商品图片"></el-step>
          <el-step title="商品内容"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <!--标签页面区域-->
        <el-form :model="addForm" :rules="addFormRules" ref="ruleForm" label-width="100px" label-position="top">
        <el-tabs :tab-position="'left'"  v-model="activeStep">
          <el-tab-pane label="基本信息" name="0">
            <!--label 对应标题,prop对应校验规则-->
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="addForm.goods_name" ></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="addForm.goods_price" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="addForm.goods_weight" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="addForm.goods_number" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
              <!--选择商品分类的级联选择框-->
              <el-cascader expand-trigger="hover"  clearable
                           v-model="selectedopt"
                           :options="cateList"
                           :props="cascadeProps" @change="handleChange"
              >
              </el-cascader>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="1">配置管理</el-tab-pane>
          <el-tab-pane label="商品属性" name="2">角色管理</el-tab-pane>
          <el-tab-pane label="商品图片" name="3">定时任务补偿</el-tab-pane>
          <el-tab-pane label="商品内容" name="4">定时任务补偿</el-tab-pane>
        </el-tabs>
        </el-form>
      </el-card>
    </div>
</template>

<script>
  export default {
    name: 'Goodsadd',
    data:function () {
      return{
        activeStep:"0",
        selectedopt:[],
        cascadeProps:{
          value:'cat_id',
          label:'cat_name',
          children:'children'
        },
        //商品分类列表
        cateList:[],
        //添加商品表单项
        addForm:{
          goods_name:'',
          goods_price:0,
          goods_weight:0,
          goods_number:0
        },
        //表单验证规则
        addFormRules:{
          goods_name:[
            {required:true ,message:'请输入商品名称',trigger:'blur'}
          ],
          goods_price:[
            {required:true ,message:'请输入商品价格',trigger:'blur'}
          ],
          goods_weight:[
            {required:true ,message:'请输入商品重量',trigger:'blur'}
          ],
          goods_number:[
            {required:true ,message:'请输入商品数量',trigger:'blur'}
          ],
        }

      }
    },
    created () {
      this.getCateList();
    },
    methods:{
      async getCateList(){
        var data=await this.$axios.get('categories');
        var res=data.data;
        if (res.meta.status!=200){
          return this.$message.error("获取商品分类失败");
        }
        this.cateList=res.data;
      },
      handlechange(){

      }
    }
  }
</script>

<style scoped lang="less">
.el-steps{
  margin: 20px;
  .el-steps_title{
    font-size: 12px;
  }

}
</style>
